<template>
  <div class="newslist_body">
    <Home_header :settings="config.setting" :showtop="false"></Home_header>
    <div class="local_nav">
      <p>
        <span>当前位置： <nuxt-link to="/">网站首页</nuxt-link>&gt;
          <template v-if="query.keywords">
               <span>搜索</span>
         </template>
          <template v-else>
              <nuxt-link :to="{path:'newslist',query:query,}">{{query.anchor}}</nuxt-link>
          </template>
        </span>
      </p>
    </div>
    <div class="article_huazhang main">
      <div class="main_newslist_content">
        <div v-for="item in newslist.data" class="sec_z">
          <nuxt-link :to="{path:'newsdetail',query:{id:item.id,...query}}">
            <span class="sec_z-s-wrap">
                <span class="txts-list-title">{{item.name||item.title}}</span>
                <span style="font-size: 12px;color: #909090;float: right;">{{item.created_at}}</span></span>
                 <span v-if="item.start_at&&item.state" class="sec_z-s-wrap2" style="font-size: 14px;color: #909090">
                    <span style="margin-right: 15px">开始时间:{{item.start_at}}</span>
                 <template v-if="item.state==1">
                  <em>
                    预约中
                  </em>
                </template>
                <template v-else-if="item.state==2">
                  <em>
                    进行中
                  </em>
                </template>
                <template v-else-if="item.state==3">
                  <em>
                    已结束
                  </em>
                </template>
               </span>
                 <span v-else-if="item.description" class="sec_z-s-wrap2" style="font-size: 14px;color: #909090">
                   {{item.description}}
                 </span>
          </nuxt-link>
          <span class="sec_zli">
            <nuxt-link target="_blank" to="/" style="margin-left: 0px;" class="sec_color">青岛华章</nuxt-link>
        </span>
        </div>
        <div class="pagelist">
          <div>{{allpage}}-{{pagecont}}-{{currpage}}</div>
          <el-pagination @current-change="pagechange" background
                         :page-count="allpage"
                         :page-size="5"
                         :total="pagecont"
                         :current-page="currpage"
                         layout="prev, pager, next" prev-text="上一页"
                         next-text="下一页">
          </el-pagination>
        </div>
      </div>
      <rightnav></rightnav>
    </div>

  </div>
</template>

<script>
    import Home_header from '../../components/Home-header'
    import rightnav from '../../components/right_nav.vue'

    export default {
        name: 'newslist',
        async asyncData({app, query}) {
          console.log(query , "f")
            console.log(query.anchor)
            console.log(query.apipath)
            let newslist;
              console.log( "ww" ,query)
                console.log( "yy" ,newslist)
            if(query.apipath=='articles'&&query.cate_id){
                newslist  = await app.$apiGet("articles", {
                    cate_id: query.cate_id,
                    page:1,
                    limit: 5,
                    is_index: 2
                });
                console.log( "ww" ,query)
                console.log( "yy" ,newslist)
            }else if(query.keywords) {
                newslist = await app.$apiGet('articlesearch', {
                    page: 1, // 分页 ，不传默认1
                    limit: 5, // 数量，不传默认10
                    keywords:query.keywords
                })
                console.log(query.keywords)
            } else{
                 newslist = await app.$apiGet(query.apipath, {
                    page: page, // 分页 ，不传默认1
                    limit: 5, // 数量，不传默认10
                })
            }

            let config = await app.$apiconfig();
            return {
                config,
                newslist,
                query,
                pagecont: newslist.total_count,
                allpage: newslist.total_page,
            }
        },
        components: {
            Home_header,
            rightnav,
        },
        data() {
            return {
                currpage: 1,

            }
        },
        watch: {
            "$route": function(){
                window.location.reload();
            }
        },
        head() {
            return this.config.header;
        },
        created() {
          this.apipath = this.$route.query.apipath;
            console.log('ee', this.newslist)
            console.log('ff', this.pagecont)
            console.log('gg', this.allpage)
        },
        methods: {
            newsList_init(page) {
               console.log(6666666)
                if(this.query.keywords) {
                  console.log(555555)
                    this.$apiGet('articlesearch', {
                        page: 1, // 分页 ，不传默认1
                        limit: 5, // 数量，不传默认10
                        keywords:query.keywords
                    }).then(res=>{
                        this.newslist = res;
                        this.pagecont = res.total_count;
                        this.allpage = res.total_page;
                    })
                }else {
                  console.log(33)
                    this.$apiGet(this.apipath, {
                        page: page, // 分页 ，不传默认1
                        limit: 5, // 数量，不传默认10
                    }).then(res => {
                        this.newslist = res;
                        this.pagecont = res.total_count;
                        this.allpage = res.total_page;
                        console.log(res)
                    })
                }

            },
            pagechange(page) {
              this.currpage = page
                this.newsList_init(page);
            }
        }
    }
</script>

<style scoped>
.pagelist{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 35px auto;
}
 @media (max-width:1250px) {
   .main {
     width: 90%;
   }
   .sec_z {
     width:90%;
     margin-left:5%;
   }
   .sec_z-s-wrap {
     width:100%;
   }
   .txts-list-title {
     width:100%;
   }
   .local_nav {
     width:90%;
     margin: auto;
   }
   .main_newslist_content {
     width: 60%;
   }
   .right_navbox {
     width:35%;
   }
   .right_rig {
     width:100%;
   }
 }
  @media (max-width:850px) {
    .right_navbox {
      width: 100%;
      order: 1;
    }
    .main_newslist_content {
      width:100%;
    }
    .local_nav {
      font-size:14px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .main {
      flex-direction: column;
    }
     .right_rig {
      width:100%!important;
    }
  }
</style>
